<template>
	<view>
		<view class="sp" v-for="item in cartList2">
			<evan-checkbox @change="check1" v-model="item.checked"></evan-checkbox>
			<view class="sp1">
				<image :src="item.cover_img"></image>
			</view>
			<view class="sp2">{{item.gname}}</view>
			<view class="sp3">￥{{item.skuList[0].price}}</view>
			<view class="sp4">数量{{item.num}}</view>
		</view>
		<view class="all">
		   <evan-checkbox @change="all" v-model="allchecked"></evan-checkbox>
		   <view class="price1">{{price1}}</view>
		   <view @tap='js'  class="js">结算</view>
		</view>
	</view>
</template>

<script>
	import {cartList} from "../../../util/user/user.js"
	export default {
		data() {
			return {
				cartList2:[],
				allchecked:false,
				checked:false,
				price:'',
				num:0,
				list:[]
			}
		},
		onLoad() {
			// uni.clearStorageSync()
			var cartList1=uni.getStorageSync('cartList');
			console.log(cartList1)	
			this.cartList2=cartList1
			// if(cartList1.skuList[0].price){
			// 	this.price=cartList1.skuList[0].price
			// }
		},
		methods: {
			js(){
				uni.navigateTo({
					url:'pay/pay'
				})
				this.list =this.cartList2.filter(item=>item.checked)
				uni.setStorageSync('list',this.list)
				console.log(this.list)
			},
			check1(){
				this.allchecked=this.cartList2.every(item=>item.checked==true)
				// if(allcheck){
				// 	this.allchecked=true
				// }else{
				// 	this.allchecked=false
				// }
			},
			all(){
				// this.allchecked=!this.allchecked;
				// this.cartList2.map(item => item.checked = this.allchecked);
				if(this.allchecked){
					this.cartList2.forEach(item=>{
						item.checked=true;
					})
				}else{
					this.cartList2.forEach(item=>{
						item.checked=false;
					})
				}
			}
		},
		computed:{
			price1(){
				var num=0;
				this.cartList2.forEach(function(item){
					if(item.checked){
						num+=item.skuList[0].price*item.num
					}
				})
				return num
			}
		}
	}
</script>

<style scoped>
	.sp{
		position: relative;
		width: 672rpx;
		height: 232rpx;
		margin: 20px auto;
		background-color: white;
		border-radius: 15px;
	}
	.square{
		margin-top: 60rpx;
	}
	.sp1{
		width: 138rpx;
		height: 138rpx;
	}
	.sp1 image{
		width: 100%;
		height: 100%;
		margin-left: 80rpx;
		margin-top: 10rpx;
	}
	.sp2{
		position: absolute;
		left: 220rpx;
		top: 20rpx;
	}
	.sp3{
		position: absolute;
		left: 220rpx;
		top: 60rpx;
	}
	.sp4{
		position: absolute;
        left: 330rpx;
		top: 60rpx;
	}
    .all{
		position: fixed;
		bottom: 0;
		
	}
	.js{
		position: fixed;
		bottom: 0;
		left: 650rpx;
	}
</style>
